Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sidebar2 #668

Closed
wants to merge 1 commit into from
Closed

Sidebar2 #668

wants to merge 1 commit into from

Conversation

apollo1291
Copy link
Contributor

No description provided.

Copy link
Member

@acrantel acrantel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for doing this! left a comment about styling with breakpoints and block vs flex

@@ -24,7 +24,7 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
const linkBase = `/${episodeId}/`;

return collapsed ? null : (
<div className="flex flex-col gap-8 py-4 h-full bg-gray-50 shadow-gray-200 shadow-sm">
<div className="flex flex-col gap-8 py-4 h-full bg-gray-50 shadow-gray-200 shadow-sm hidden sm:block">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This div should have display=flex on screens larger than 640px, not displayblock. Adding sm:block makes the div have display=block on screens larger than the sm breakpoint (640px).

we should change this className to be:
"hidden sm:flex flex-col gap-8 py-4 h-full bg-gray-50 shadow-gray-200 shadow-sm"

here's a useful link to understand how style using breakpoints: https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens

@acrantel
Copy link
Member

superseded by #654

@acrantel acrantel closed this Aug 29, 2023
@acrantel acrantel deleted the sidebar2 branch October 24, 2023 20:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants